<template>
	<view>
		<view @click="open">
			<view class="example-body">
				<uni-datetime-picker return-type="date" @change="startChange" v-model="single" :value="startDateStr">
					<view class="dateStr">
						<image class="timeImg" src="/packagesRevenue/static/日期@2x.png"></image>
						<span class="modzeTitle">{{ startDateStr }}</span>
					</view>
				</uni-datetime-picker>
			</view>
		</view>
		<view class="bodyView">
			<view class="tabView">
				<view :class="tabCurrent == 0 ? 'lefted' : 'left'" @click="tab(0)">今日</view>
				<view :class="tabCurrent == 1 ? 'righted' : 'right'" @click="tab(1)">昨日</view>
			</view>
			<view class="poView">
				<view class="priceView">
					<view class="priceImg">
						<image class="priceI" src="/packagesRevenue/static/收入@3x.png"></image>
					</view>
					<view class="orderAll">{{ order[0].price + order[1].price + order[2].price }}</view>
					<view class="orderText">收入</view>
				</view>
				<view class="orderView">
					<view class="orderImg">
						<image class="priceI" src="/packagesRevenue/static/订单-全部订单@3x.png"></image>
					</view>
					<view class="orderAll">{{ order[0].classify + order[1].classify + order[2].classify }}</view>
					<view class="orderText">订单量</view>
				</view>
			</view>
		</view>
		<view class="bodyView">
			<view class="title">收入分布</view>
			<CustomEchart></CustomEchart>
		</view>
		<view class="bodyView">
			<view class="title">订单分布</view>
			<barEchar></barEchar>
		</view> 
	</view>
</template>

<script> 

import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue' 
	export default {
		data() {
			return {
				orderTypeList: ["进行中", "已完成"],
				tabCurrent: 0,
				order: [{
						classify: 100,
						price: 2000
					},
					{
						classify: 200,
						price: 981.24
					},
					{
						classify: 300,
						price: 1234.21
					}
				],

				// 日期
				startDateStr: "自定义",
				startDate: null,
				endDateStr: "2023年03月02日",
				endDate: null,

				mode: ["到店维修", "上门取车"], // 维修方式

				// ----------------------------------------------------------------
			 

				// ----------------------------------------------------------------
			};
		}, 
		onReady() {},
		beforeDestroy() {},
		methods: {
			open() {
				
			},
			startChange(date) {
				console.log("date:", date);

				// 提取年、月、日、小时和分钟
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，并且补零
				let day = date.getDate().toString().padStart(2, '0'); // 补零
				let hours = date.getHours().toString().padStart(2, '0'); // 补零
				let minutes = date.getMinutes().toString().padStart(2, '0'); // 补零

				// 格式化日期字符串
				let formattedDate = `${year}/${month}/${day} ${hours}:${minutes}`;

				this.startDate = date;
				this.startDateStr = `${year}/${month}/${day}`;
				this.startTimeStr = `${hours} : ${minutes}`;
			},

			tab(index) {
				// const chartDom = document.getElementById("main");
				// const chartDom = uni.createSelectorQuery("main");
				// console.log("=======================", chartDom)
				this.tabCurrent = index;
			},
		}
	};
</script>

<style> 

	/* 日期选择开始 */
	.dateStr {
		display: flex;
		flex-wrap: nowrap;
		justify-content: right;
		align-items: center;
		font-size: 26rpx;
		position: fixed;
		right: 30rpx;
		top: 60rpx;
	}

	.dateStr>view {
		margin: 0 10rpx;
		background-color: #F2F2F2;
		border-radius: 50rpx;
		padding: 0 30rpx;
	}

	.timeImg {
		width: 30rpx;
		height: 28rpx;
		margin-right: 5rpx;
	}

	/* 日期选择结束 */

	.bodyView {
		margin: 0 auto;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 25rpx;
	}

	/* 头部开始 */
	.tabView {
		display: flex;
		border-radius: 40rpx;
		width: 400rpx;
		justify-content: center;
		line-height: 60rpx;
		margin: 0 auto;
	}

	.tabView>view {
		padding: 5rpx 45rpx;
	}

	.lefted {
		background-color: #2979ff;
		color: aliceblue;
		border-radius: 40rpx 0 0 40rpx;
	}

	.right {
		background-color: #F2F2F2;
		color: #2979ff;
		border-radius: 0 40rpx 40rpx 0;
	}

	.left {
		background-color: #F2F2F2;
		color: #2979ff;
		border-radius: 40rpx 0 0 40rpx;
	}

	.righted {
		background-color: #2979ff;
		color: aliceblue;
		border-radius: 0 40rpx 40rpx 0;
	}

	.poView {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 40rpx;
		margin: 20rpx auto 0;
		border-top: #f0f0f0 6rpx solid;
	}

	.poView image {
		width: 35rpx;
		height: 35rpx;
		margin-top: 2rpx;
		padding: 3rpx 0;
	}

	.priceImg {
		/* background-color: #000; */
		background: linear-gradient(to right bottom, #FFA76A, #FF4B15);
		width: 55rpx;
		border-radius: 15rpx;
		text-align: center;
		padding: 10rpx 0 0 5rpx;
		margin: 40rpx auto 0;
	}

	.orderImg {
		/* background-color: #000; */
		background: linear-gradient(to top left, #2270F2, #66AFF9);
		width: 55rpx;
		border-radius: 15rpx;
		text-align: center;
		padding: 10rpx 0 0 5rpx;
		margin: 40rpx auto 0;
	}

	.priceView,
	.orderView {
		text-align: center;
		box-shadow: 0 0 5px rgba(216, 216, 216, 0.5);
		width: 200rpx;
		height: 270rpx;
	}

	.orderAll {
		font-size: 32rpx;
		font-weight: bold;
		margin: 20rpx auto;
	}

	.orderText {
		font-size: 26rpx;
		font-weight: bold;
	}

	/* 头部结束 */
	.title {
		font-weight: bold;
		padding-bottom: 15rpx;
		border-bottom: #f0f0f0 6rpx solid;
	}
</style>